<template>
	<view class="paytype">
		<uni-popup :isnonehover="false" type="bottom" :show="isshowpup" @change="changepup" >
			<view class="LeavingAmessage">
				<view class="titelmodel flex ali-c jus-b">
					<view class="text">请选择支付方式</view>
					<image class="imgs" @tap="close" :src="photo_cdn+'zpupload/static/img/close_icon.png'" mode="aspectFit"></image>
				</view>
				<view class="paymoney">
					需付款¥<text class="num" style="margin-left: 10rpx;">{{price}}</text>
				</view>
				
				<!-- 支付方式 -->
				<view class="paytypelist">	
					<radio-group color="#227afc" @change="radioChange">		
						<!-- #ifdef   H5 || MP-WEIXIN || APP-PLUS  -->
						<view>
						<label class="uni-list-cell uni-list-cell-pd" >
							<view class="paytypelist_item felx ali-c jus-b">
								<view class="felx ali-c">
									<image class="payicon" :src="photo_cdn+'zpupload/static/img/weixin.png'" mode="aspectFit"></image>
									<text class="pay_test">微信支付</text>
								</view>
								<view>
									<radio :color="$themecolor" value="1" :checked="chinds==1" />
								</view>
							</view>
						</label>
						</view>
						<!-- #endif -->	
						
						<!-- #ifdef APP-PLUS || H5 || MP-ALIPAY  -->
						<view class="">
						<label class="uni-list-cell uni-list-cell-pd" >
							<view class="paytypelist_item felx ali-c jus-b">
								<view class="felx ali-c">
									<image class="payicon" :src="photo_cdn+'zpupload/static/img/alipay.png'" mode="aspectFit"></image>
									<text class="pay_test">支付宝</text>
								</view>
								<view>
									<radio :color="$themecolor" value="2" :checked="chinds==2" />
								</view>
							</view>
						</label>
						</view>
						<!-- #endif -->
						
					</radio-group>
				</view>
				
				<view class="paytype_foot">
					<view class="submitbtn active" @tap="payreturn">确认支付</view>
				</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import config from "@/utils/config.js";
	let {staticurl,photo_cdn} = config.baseUrl;
	export default{
		name:'paytype',
		props:{
			price:{
				type:Number|String,
				default:0
			},
			info:{
				type:Object,
				default:()=>{
					return {};
				}
			},
		},
		data(){
			return {
				photo_cdn,
				isshowpayye:false,
				//1微信  2支付宝 
				chinds:1,
				type:"bottom",// left right top bottom center
				isshowpup:false,
			};
		},
		methods:{
			//修改默认的支付方式
			sitechinds(val){
				this.chinds = val;
			},
			//子组件设置默认支付方式
			setchinds(data){
				this.chinds = data;
			},
			changepup(e){
				if(e.show==false){
					this.isshowpup = false;
					this.$emit("clonepup");
				}
			},
			show() {	
				this.isshowpup = true;
			},
			close() {
				this.isshowpup = false;
			},
			hanchange(e){
				//子组件调用父组件的方法
				this.$emit('fatherMethod',e.detail.value);
			},
			//单选改变后
			radioChange(evt){
				this.chinds = evt.detail.value
				//处理显示需要支付的金额
			},
			payreturn(){
				this.close();//关闭选择弹窗
				this.$emit('payreturn',this.chinds);
			},
		}
	}
</script>

<style lang="scss">
.uni-list-cell{
	width: 100%;
}
.lu-popup-content{
	border-radius: 14upx;
}
.limayouhui{
	color: skyblue;
	font-size: 30upx;
}
.LeavingAmessage{
	background-color: #FFFFFF;
	height: 680upx;
	padding: 24upx;
	padding-top: 0;
	overflow: hidden;
	
	.titelmodel{
		height:90upx;
		line-height: 90upx;
		font-size:36upx;
		font-weight:500;
		color:rgba(0,0,0,1);
		.imgs{
			width:36upx;
			height:36upx;
		}
	}
	.paymoney{
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 60upx 0;
		color:#000000;
		font-size: 32upx;
		.num{
			font-size: 48upx;
			font-weight: 700;
		}
	}
	.paytypelist{
		.paytypelist_item{
			margin-bottom: 40upx;
			height: 80upx;
			line-height: 80upx;
			border-bottom: 1px solid rgba(238,238,238,1);

			.payicon{
				width: 44upx;
				height: 44upx;
			}
			.pay_test{
				font-size:34upx;
				color:#000000;
				font-weight:500;
				margin-left: 30upx;
			}
		}
		.paytypelist_item:nth-last-child(1){
			border: 0;
		}
	}
	
	.paytype_foot{
		height: 94upx;
		line-height: 94upx;
		
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 100upx;
		/* #ifdef H5 */
		bottom: 100upx;
		/* #endif */
		
		.paytype_foot_botton{
			font-weight:500;
			color:rgba(0,0,0,1);
			text-align: center;
			font-size:36upx;
			margin: 0 24upx;
			border-top:1px solid rgba(245,241,241,1);
		}
	}
}


.submitbtn{
	margin: 60upx 24upx;
	height:88upx;
	line-height: 88upx;
	text-align: center;
	background:rgba(254,197,156,1);
	border-radius:12upx;
	font-size:32upx;
	color:rgba(255,255,255,1);
}

.submitbtn.active{
	background: $themecolor;
}

.tishi{
	font-size:24upx;
	font-weight:500;
	color:skyblue;
	line-height: 110%;
}
</style>
